<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="./templates/rpsTemplate.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core">

    <ui:define name="content">
        <p:growl id="growl" showDetail="true" globalOnly="true"/>
        <ui:include src="dialogs/schedule-dialog.xhtml"/>
        <h:form id="frm-applicant">
            <div class="content-box" style="display: table; width: 100%">
                <div class="content-box-header">
                    <h3>Attach vacancy</h3>
                </div><!-- End .content-box-header -->
                <div class="content-box-content">
                    <p class="inline">
                        <label>Applicant</label>
                        <h:selectOneMenu id="cboApplicant"
                                         value="#{attachBean.applicantID}"
                                         styleClass="text-input small-input"
                                         rendered="#{not empty attachBean.applicants}">
                            <f:selectItems value="#{attachBean.applicants}"
                                           var="applicant"
                                           itemLabel="#{applicant.firstName} #{applicant.lastName}"
                                           itemValue="#{applicant.applicantID}"/>
                            <f:ajax execute="@this" render="@form"/>
                            <f:param name="id" value="#{applicant.applicantID}"/>
                        </h:selectOneMenu>
                        <h:panelGroup rendered="#{empty attachBean.applicants}">
                            <p>Have not an applicant to attached vacancies.
                                <a href="applicant.xhtml">Create new</a> an applicant.
                            </p>

                        </h:panelGroup>
                    </p>
                    <div class="tab-content default-tab">

                        <div class="content-box column-left">
                            <div class="content-box-header">
                                <h3>Applicant Vacancies</h3>
                            </div><!-- End .content-box-header -->

                            <div class="content-box-content">
                                <div class="tab-content default-tab">
                                    <div class="attach-scroll">
                                        <p:fieldset id="selectedVacancies">
                                            <p:outputPanel id="dropArea">
                                                <h:outputText value="!!!Drop here!!!"
                                                              rendered="#{empty attachBean.listDropped}"
                                                              style="font-size:24px;" />
                                                <h:dataTable
                                                    value="#{attachBean.listDropped}"
                                                    var="vacancy2" style="width: 100%"
                                                    rendered="#{not empty attachBean.listDropped}">
                                                    <h:column>
                                                        <p:panel id="pnl2" header="#{vacancy2.title}"
                                                                 style="margin-bottom: 10px; display: table; width: 100%">
                                                            <div id="vacancy">
                                                                <table cellpadding="4">
                                                                    <tr>
                                                                        <td rowspan="3" style="vertical-align: middle; width: 140px">
                                                                            <img alt=""  src="resources/images/other/job.png"/>
                                                                        </td>
                                                                        <td><h4>#{vacancy2.title}</h4></td>
                                                                        <td rowspan="3" style="vertical-align: top; width: 40px">

                                                                            <h:commandButton id="detachButton"
                                                                                             image="resources/images/icons/delete.png"
                                                                                             value="Detach"
                                                                                             title="Detach"
                                                                                             rendered="#{not attachBean.scheduled(vacancy2.vacancyID)}"
                                                                                             actionListener="#{attachBean.detachVacancy(vacancy2.vacancyID)}">
                                                                                <f:ajax execute="@this" render="@form"/>
                                                                            </h:commandButton>
                                                                            <h:commandButton
                                                                                image="resources/images/icons/calendar.png"
                                                                                value="View schedule"
                                                                                title="View schedule"
                                                                                onclick="dlg.show();"
                                                                                rendered="#{attachBean.scheduled(vacancy2.vacancyID)}"
                                                                                actionListener="#{attachBean.viewSchedule()}">
                                                                                <f:ajax execute="@this" render=":frm-schedule"/>
                                                                                <f:param name="id" value="#{attachBean.applicantID}"/>
                                                                                <f:param name="vid" value="#{vacancy2.vacancyID}"/>
                                                                            </h:commandButton>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td><p>Department: <strong>#{vacancy2.department.name}</strong></p></td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td><p>Hired:
                                                                                #{attachBean.numberHired(vacancy2.vacancyID)}/
                                                                                #{vacancy2.numberRequirement}</p></td>
                                                                    </tr>
                                                                </table>
                                                            </div>
                                                        </p:panel>
                                                    </h:column>
                                                </h:dataTable>
                                            </p:outputPanel>
                                        </p:fieldset>
                                    </div>
                                    <p:droppable for="selectedVacancies" tolerance="touch"
                                                 activeStyleClass="ui-state-highlight" datasource="availaleVacancies">
                                        <p:ajax listener="#{attachBean.onVacancyDrop}" update="dropArea availaleVacancies" />
                                    </p:droppable>
                                </div>
                            </div>
                        </div>
                        <div class="content-box column-right">
                            <div class="content-box-header">
                                <h3>Available Vacancies</h3>
                            </div><!-- End .content-box-header -->

                            <div class="content-box-content">
                                <div class="tab-content default-tab">
                                    <div class="attach-scroll">
                                        <h:dataTable id="availaleVacancies" value="#{attachBean.listAvailable}"
                                                     var="vacancy" style="width: 100%">
                                            <h:column>
                                                <p:panel id="pnl" header="#{vacancy.title}"
                                                         style="margin-bottom: 10px;">
                                                    <div id="vacancy">
                                                        <table cellpadding="4">
                                                            <tr>
                                                                <td rowspan="3" style="vertical-align: middle; width: 140px">
                                                                    <img alt=""  src="resources/images/other/job.png"/>
                                                                </td>
                                                                <td><h4>#{vacancy.title}</h4></td>
                                                                <td rowspan="3" style="vertical-align: top; width: 40px">
                                                                    <h:commandButton id="attachButton"
                                                                                     image="resources/images/icons/add.png"
                                                                                     value="Attach"
                                                                                     title="Attach"
                                                                                     actionListener="#{attachBean.attachVacancy(vacancy.vacancyID)}">
                                                                        <f:ajax execute="@this" render="@form"/>
                                                                    </h:commandButton>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td><p>Department: <strong>#{vacancy.department.name}</strong></p></td>
                                                            </tr>
                                                            <tr>
                                                                <td><p>Hired:
                                                                        #{attachBean.numberHired(vacancy.vacancyID)}/
                                                                        #{vacancy.numberRequirement}</p></td>
                                                            </tr>
                                                        </table>
                                                    </div>
                                                </p:panel>

                                                <p:draggable for="pnl" revert="true"
                                                             handle=".ui-panel-titlebar" stack=".ui-panel"/>
                                            </h:column>
                                        </h:dataTable>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="clear"/>
                        <h:commandButton value="Save changes"
                                         styleClass="button"
                                         actionListener="#{attachBean.save()}">
                            <f:param name="id" value="#{attachBean.applicantID}"/>
                        </h:commandButton>
                    </div>
                </div>
            </div>
        </h:form>
    </ui:define>

</ui:composition>
